<template>
  <view class="itemHead">
    <view class="info">
      <template v-if="item.worker">
        <image mode="aspectFill" :src="item.worker.logo" lazy-load></image>
        <view>{{ item.worker.level_name }}：{{ item.worker.name }}</view>
      </template>
    </view>
    <view class="rig" v-if="showStatus">{{ getStatus(item.status) }}</view>
  </view>
</template>

<script>
import { statusList } from "../static/order";

export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
    showStatus: {
      type: Boolean,
      default: true,
    },
  },

  computed: {
    getStatus() {
      return (status) => {
        return statusList[status] ? statusList[status].name : "";
      };
    },
  },
};
</script>

<style lang="less" scoped>
.itemHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30rpx;

  .rig {
    font-size: 24rpx;
    color: #f0250e;
  }
}

.info {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  margin-right: 10rpx;

  image {
    margin-right: 10rpx;
    width: 40rpx;
    height: 40rpx;
    border-radius: 32px;
    background: #f2f2f2;
  }

  view {
    flex: 1;
    overflow: hidden;
  }
}
</style>
